import React, { useEffect, useState } from 'react';
import './index.scss';
import Visitnum from '../Compon/Visitnum.tsx';
import {
  BorderBox2,
  BorderBox1,
  WaterLevelPond,
} from '@jiaminghi/data-view-react';
import ZHifu from '../Compon/ZHifu.tsx';
import UserChangetype from '../Compon/userChangetype.tsx';
import Content_two from '../Compon/Content_two.tsx';
import Content_two_right from '../Compon/Content_two_right.tsx';
import Long_type from '../Compon/ziyuan_type/Long_type.tsx';
import Short_video from '../Compon/ziyuan_type/Short_video.tsx';
import Tiezi from '../Compon/ziyuan_type/Tiezi.tsx';
import ZHibo from '../Compon/ziyuan_type/ZHibo.tsx';
import shape from '@material-ui/core/styles/shape';
import ZIyuanpingtai from '../Compon/ZIyuanpingtai.tsx';
import Yonghuzaixia from '../Compon/Yonghuzaixia.tsx';
import Renmen_left from '../Compon/remen/Renmen_left.tsx';
import Renmen_right from '../Compon/remen/Renmen_right.tsx';
import Renmen_table from '../Compon/remen/Renmen_table.tsx';
import { get_xiaoshoue_list } from '../utils/api.tsx';
export default function Index() {
  useEffect(() => {
    getlistxiaoshoue();
  }, []);
  const [listxiaoshoue, setlistxiaoshoue] = useState([]);
  const getlistxiaoshoue = async () => {
    const res = await get_xiaoshoue_list();
    setlistxiaoshoue(res.data.data);
    console.log(listxiaoshoue);
  };
  
  return (
    <div className="all">
      <div className="content">
        <div className="title">
          <div>
            <b>首页概况</b>
          </div>
          <div>
            <BorderBox2>上一页</BorderBox2>
          </div>
        </div>
        <div className="content-one">
          <div className="one">
            <div>销售总额</div>
            <div className="word_top_size">23</div>
            <div style={{ fontSize: '0.14rem' }}>
              <span>周同比：+23%</span>
              <br />

              <span>日环：+22%</span>
            </div>
            <br />
            <div>日均销售额￥￥123</div>
          </div>
          <div className="one">
            <div>访问量</div>
            <div className="word_top_size">{ listxiaoshoue.length}</div>
            <div
              style={{ width: '100%', height: '1.3rem', marginTop: '-0.3rem' }}
            >
              <Visitnum fangwenliang={listxiaoshoue}></Visitnum>
            </div>
          </div>
          <div className="one">
            <div>支付笔数</div>
            <div className="word_top_size">8864</div>
            <div
              style={{ width: '100%', height: '1.2rem', marginTop: '-0.3rem' }}
            >
              <ZHifu></ZHifu>
            </div>
          </div>
          <div className="one">
            <div>用户转化率</div>
            <div className="word_top_size">78%</div>
            <div style={{ width: '100%', height: '1.5rem' }}>
              <UserChangetype></UserChangetype>
            </div>
          </div>
        </div>
        <div className="content-two">
          <div className="left" style={{ width: '60%', height: '100%' }}>
            <Content_two getlist={listxiaoshoue}></Content_two>
          </div>
          <div className="right" style={{ width: '40%' }}>
            <Content_two_right></Content_two_right>
          </div>
        </div>
        <div className="content-three">
          <div className="left" style={{ width: '65%' }}>
            <b>各类资源占比</b>
            <hr />
            <div
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                width: '100%',
              }}
            >
              <div style={{ width: '20%' }}>
                <Long_type></Long_type>
              </div>
              <div style={{ width: '20%' }}>
                <Short_video></Short_video>
              </div>
              <div style={{ width: '20%' }}>
                <Tiezi></Tiezi>
              </div>
              <div style={{ width: '20%' }}>
                <ZHibo></ZHibo>
              </div>
            </div>
          </div>
          <div className="right" style={{ width: '30%' }}>
            <b>资源剩余</b>
            <hr />
            <WaterLevelPond
              config={{
                data: [100, 50, 30, 20, 10,],
                height: 200,
                width: 200,
                waterLevelValue: 0.5,
                waveHeight: 0.1,
                waveLength: 0.1,
                waveCount: 3,
                shape: 'round',
                waveColor: '#0080FF',
                waterLevelColor: '#0080FF',
                label: {
                  formatter:'',
                }
              }}
              style={{ width: '150px', height: '200px' }}
            />
          </div>
        </div>
        <div className="content-four">
          <div style={{ width: '48%' }}>
            <b>线上热门搜素</b>
            <hr />
            <div
              style={{
                width: '100%',
                height: '2rem',
                display: 'flex',
                flexDirection: 'column',
                // justifyContent: 'space-between',
              }}
            >
              <div style={{ width: '100%',height: '2rem', }}>
                <Renmen_left></Renmen_left>
              </div>
              <div style={{ width: '100%' ,height: '2rem' }}>
                <Renmen_right></Renmen_right>
              </div>
            </div>
           
          </div>
          <div style={{ width: '48%' }}>
            <b>平台资源趋势</b>
            <hr />
            <ZIyuanpingtai></ZIyuanpingtai>
          </div>
        </div>

        <div className="content-five">
          <Yonghuzaixia></Yonghuzaixia>
        </div>
      </div>
    </div>
  );
}
